<script setup lang="ts">
import type { GoodsInfoResult } from '~/api/details/types'
import APIDetails from '~/api/details'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { timeAgoFromTimestamp, capitalizeFirstLetter } from '~/utils/index'
import { useAuth } from '~/stores/auth/index'
import { replaceCommaWithDash } from '~/utils/index'

interface Emits {
    (e: 'set-concern', is_concern: 0 | 1): void;
}

const $emit = defineEmits<Emits>()
const goodsInfo = inject<Ref<GoodsInfoResult>>('goodsInfo')
const consumeLogList = inject<Ref<any>>('consumeLogList')
const { isNextOperation } = useAuth()

function submitAttention() {
    if (!isNextOperation()) return
    ElMessageBox.confirm(
        '是否关注该店铺？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (!goodsInfo?.value.Invite_code) return
        const loading = ElLoading.service({ lock: true })
        APIDetails.setUserConcern(goodsInfo?.value.Invite_code).then(() => {
            $emit('set-concern', 1)
        }).finally(() => {
            loading.close()
        })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

function submitUnfollow() {
    ElMessageBox.confirm(
        '是否取消关注该店铺？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (!goodsInfo?.value.Invite_code) return
        const loading = ElLoading.service({ lock: true })
        APIDetails.cancelUserConcern(goodsInfo?.value.Invite_code).then(() => {
            $emit('set-concern', 0)
        }).finally(() => {
            loading.close()
        })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

function handleJumpStore() {
    if (isNextOperation()) {
        window.open($router.resolve(`/store-home?shopId=${goodsInfo?.value?.shop_id}`).href, '_blank')
    }
}

const $router = useRouter()

function handleJumpDetails(item: any) {
    window.open($router.resolve(`/${item.type}-details/${item.goods_id}?categoryType=${capitalizeFirstLetter(item.type)}`).href, '_blank')
}

</script>

<template>
    <div class="publisher">
        <div class="info">
            <div class="left">
                <div class="avatar" @click="handleJumpStore">
                    <img v-if="goodsInfo?.head_img" :src="goodsInfo?.head_img" alt="img">
                </div>
                <button type="button" @click="submitAttention" v-if="goodsInfo?.is_concern == 0">关注</button>
                <button type="button" style="background-color: #9499a0;" v-if="goodsInfo?.is_concern == 1"
                    @click="submitUnfollow">已关注</button>
            </div>
            <div class="right">
                <p class="name">{{ goodsInfo?.username }}</p>
                <div class="autonym">
                    <img src="./images/img.png" alt="img">
                    <p>{{ goodsInfo?.auth_info?.id_card }}{{ goodsInfo?.auth_info?.real_name }}</p>
                </div>
                <p class="shop-number">
                    店号：{{ goodsInfo?.shop_code }}
                </p>
                <div class="location">
                    <img src="./images/arcoDesign-location.svg" alt="arcoDesign-location">
                    <span>{{ replaceCommaWithDash(goodsInfo?.area) }}</span>
                </div>
            </div>
        </div>
        <div class="number">
            <div>
                <p>{{ goodsInfo?.income || 0 }}元</p>
                <p>近一月收入</p>
            </div>
            <div>
                <p>{{ goodsInfo?.works || 0 }}</p>
                <p>作品数</p>
            </div>
            <div>
                <p>{{ goodsInfo?.fans || 0 }}</p>
                <p>粉丝数</p>
            </div>
        </div>
        <ul class="sale">
            <li v-for="item in consumeLogList" :key="item" @click="handleJumpDetails(item)">
                <p>{{ item.title }}</p>
                <p>{{ timeAgoFromTimestamp(item.time) }}</p>
            </li>
        </ul>
    </div>
</template>

<style lang="less" scoped>
.publisher {
    background-color: #f5f4f8;
    margin-top: 40px;
    padding: 0 14px;
    padding-top: 31px;
    padding-bottom: 20px;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    .sale {
        width: 95%;
        margin: 0 auto;
        margin-top: 18px;

        li {
            display: flex;
            justify-content: space-between;
            color: rgba(154, 154, 154, 1);
            font-size: 14px;
            margin: 8px 0;
            cursor: pointer;
        }
    }

    .number {
        display: flex;
        border-bottom: 1px dashed #CFCFCF;
        padding-bottom: 17px;
        margin-top: 50px;

        div {
            flex: 1;
            text-align: center;

            p {
                font-size: 14px;

                &:first-child {
                    color: rgba(64, 149, 229, 1);
                }

                &:last-child {
                    color: rgba(154, 154, 154, 1);
                }
            }
        }
    }

    .info {
        display: flex;

        .right {
            margin-left: 37px;

            .location {
                display: flex;
                align-items: center;
                margin-top: 8px;

                span {
                    color: rgba(206, 206, 206, 1);
                    font-size: 13px;
                    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
                }
            }

            .shop-number {
                color: rgba(206, 206, 206, 1);
                font-size: 13px;
                margin-top: 10px;
            }

            .autonym {
                display: flex;
                align-items: center;
                margin-top: 3px;

                p {
                    color: rgba(64, 149, 229, 1);
                    font-size: 14px;
                }
            }

            .name {
                color: rgba(16, 16, 16, 1);
                font-size: 18px;
                font-family: 'SOURCEHANSANSCN-REGULAR';
            }
        }

        .left {
            margin-left: 20px;

            .avatar {
                width: 52px;
                height: 52px;
                background-color: #ffffff;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            button {
                width: 52px;
                height: 18px;
                border-radius: 5px;
                background-color: rgba(249, 20, 20, 1);
                color: rgba(255, 255, 255, 1);
                font-size: 12px;
                border: none;
                margin-top: 26px;
                cursor: pointer;
            }
        }
    }
}
</style>